<template lang="">
  <el-card class="box-card" style="margin: 10px 0">
    <!-- 销售额部分 -->
    <div>
      <el-row :gutter="10">
        <el-col :span="18">
          <h3>销量</h3>
          <barCharts></barCharts>
        </el-col>
        <el-col :span="6">
          <h3>游戏畅销榜</h3>
          <ul class="qs">
            <li v-for="item in gamenamelist1" v-on:key="item">
              <span class="rindex"></span>
              <span class="rvalue">{{ item }}</span>
            </li>
          </ul>
        </el-col>
      </el-row>
    </div>
  </el-card>
</template>
<script>
import barCharts from "./barCharts";
import { mapState } from "vuex";
export default {
  name: "Sale",
  components: {
    barCharts,
  },
  data() {
    return {
      gamelist1: {},
    };
  },
  computed: {
    ...mapState({
      gamenamelist1: (state) => state.home.gamenamelist1,
    }),
  },
};
</script>

<style scoped>
.clearfix {
  position: relative;
  display: flex;
  justify-content: space-between;
}

.tab {
  width: 100%;
}

.right {
  position: absolute;
  right: 0;
}

.date {
  width: 230px;
  margin: 0 20px;
}

.right span {
  margin: 0px 15px;
}

.charts {
  width: 100%;
  height: 300px;
}

.qs {
  list-style: none;
  width: 100%;
  height: 300px;
  padding: 0px;
}

.qs li {
  height: 8%;
  margin: 10px 0px;
}

.qs span:nth-child(1) {
  float: left;
  width: 19px;
  height: 16px;
  border-radius: 50%;
  text-align: center;
}

.rindex {
  /* z-index: 9999; */
  background: black;
  color: white;
}

.rvalue {
  padding: 0 25px;
}

.rdate {
  float: right;
}
</style>
